<template>
  <a-row class="!mx-0 mt-5" :gutter="20" id="a-row-56">
    <a-col :span="17" class="grid grid-cols-2 gap-x-5 gap-y-1 !pl-0" id="a-col-57">
      <a-flex vertical v-for="(item, index) in list5" :key="index" :id="`a-flex-58-${index}`">
        <a-flex align="center" justify="space-between" :id="`a-flex-59-${index}`">
          <a-flex :gap="25" :id="`a-flex-60-${index}`">
            <a-typography-link href="#" class="text-xl py-1 !text-[#000] relative" :id="`a-typography-link-61-${index}`">
              {{ item.title }}
              <a-divider class="border-4 border-[#d9251e] absolute -bottom-0.5 my-0" :id="`a-divider-62-${index}`" />
            </a-typography-link>
          </a-flex>
          <a-typography-link href="#" class="text-sm !text-[#000]" :id="`a-typography-link-63-${index}`">
            更多
            <PlusOutlined :id="`plusoutlined-64-${index}`" />
          </a-typography-link>
        </a-flex>
        <a-divider class="my-0 border-4 border-[#ebebeb] -translate-y-0.5 relative -z-10" :id="`a-divider-65-${index}`" />
        <a-typography-link href="#" class="flex flex-col relative mt-5" :id="`a-typography-link-66-${index}`">
          <a-image :src="item.img" :preview="false" class="aspect-[2/1]" :id="`a-image-67-${index}`" />
          <a-typography-paragraph
            class="!mb-0 bg-black/40 !text-white text-center absolute bottom-0 inset-x-0 line-clamp-1 text-lg py-1 px-4"
            :id="`a-typography-paragraph-68-${index}`"
            >{{ item.subTitle }}</a-typography-paragraph
          >
        </a-typography-link>
        <a-list :split="false" :data-source="item.list" class="mt-4" :id="`a-list-69-${index}`">
          <template #renderItem="{ item: item1, index: index1 }">
            <a-list-item
              class="!px-0 !py-0 !mb-1 !flex"
              :class="{
                '!mb-0': index1 === item.list.length - 1,
              }"
              :id="`a-list-item-70-${index}-${index1}`"
            >
              <a-badge color="#e5e5e5" :id="`a-badge-71-${index}-${index1}`" />
              <a-typography-link href="#" class="!text-[#000] flex-1 line-clamp-1 pr-2" :id="`a-typography-link-72-${index}-${index1}`">{{
                item1
              }}</a-typography-link>
            </a-list-item>
          </template>
        </a-list>
      </a-flex>
    </a-col>
    <a-col :span="7" class="!pr-0" id="a-col-73">
      <a-flex vertical :gap="18" id="a-flex-74">
        <a-typography-link href="#" v-for="(item, index) in list6" :key="index" class="flex flex-col" :id="`a-typography-link-75-${index}`">
          <a-image :src="item" :preview="false" class="aspect-[13/3]" :id="`a-image-76-${index}`" />
        </a-typography-link>
      </a-flex>
      <a-flex align="center" justify="space-between" class="mt-4" id="a-flex-77">
        <a-flex :gap="25" id="a-flex-78">
          <a-typography-link href="#" class="text-xl py-1 !text-[#000] relative" id="a-typography-link-79">
            协会出版物
            <a-divider class="border-4 border-[#d9251e] absolute -bottom-0.5 my-0" id="a-divider-80" />
          </a-typography-link>
        </a-flex>
        <a-typography-link href="#" class="text-sm !text-[#000]" id="a-typography-link-81">
          更多
          <PlusOutlined id="plusoutlined-82" />
        </a-typography-link>
      </a-flex>
      <a-divider class="!my-0 border-4 border-[#ebebeb] -translate-y-0.5 relative -z-10" id="a-divider-83" />
      <a-flex :gap="20" class="my-4" id="a-flex-84">
        <a-typography-link href="#" v-for="(item, index) in list7" :key="index" class="flex flex-col" :id="`a-typography-link-85-${index}`">
          <a-image :src="item.img" :preview="false" class="border border-solid border-[#e5e5e5] aspect-[4/5]" :id="`a-image-86-${index}`" />
          <a-typography-title :level="5" class="text-center !my-2" :id="`a-typography-title-87-${index}`">{{
            item.title
          }}</a-typography-title>
        </a-typography-link>
      </a-flex>
      <a-flex :gap="8" justify="center" id="a-flex-88">
        <a-typography-link
          href="#"
          class="h-1.5 w-8 bg-[#e9e7e5]"
          v-for="index in nTopPages1"
          :key="index"
          :class="{
            '!bg-[#a41d1f]': index === currentTopPage1,
          }"
          :id="`a-typography-link-89-${index}`"
        />
      </a-flex>
    </a-col>
  </a-row>
  <a-flex :gap="50" class="mt-4" id="a-flex-90">
    <a-typography-link href="#" class="flex flex-col border border-solid border-[#eee]" id="a-typography-link-91">
      <a-image src="https://picsum.photos/id/30/1000/800" :preview="false" class="aspect-[6/1]" id="a-image-92" />
    </a-typography-link>
    <a-typography-link href="#" class="flex flex-col border border-solid border-[#eee]" id="a-typography-link-93">
      <a-image src="https://picsum.photos/id/31/1000/800" :preview="false" class="aspect-[6/1]" id="a-image-94" />
    </a-typography-link>
  </a-flex>
  <a-typography-link href="#" class="flex flex-col border border-solid border-[#eee] mt-4" id="a-typography-link-95">
    <a-image src="https://picsum.photos/id/32/1000/800" :preview="false" class="aspect-[20/1]" id="a-image-96" />
  </a-typography-link>
</template>

<script setup>
  const nTopPages1 = 2;
  const currentTopPage1 = 1;
  const list5 = [
    {
      title: '行业资讯',
      img: 'https://picsum.photos/id/31/1000/800',
      subTitle: '春节，申遗成功！',
      list: [
        '从业35年，华人顶级金厨为何保持一周四刷《舌尖上的中国》？',
        '商务部公告2024年第60号 关于对进口牛肉进行保障措施立案调查的公告',
        '习近平对社会工作作出重要指示',
      ],
    },
    {
      title: '会员风采',
      img: 'https://picsum.photos/id/32/1000/800',
      subTitle: ' 汉堡王品牌方RBI集团全资控股汉堡王中国  承诺深化汉堡王中国业务增长 ',
      list: [
        ' 首批“中国消费名品”名单公示 兰州牛肉拉面成136个入选品牌中唯一面食品类',
        '讣告｜沉痛悼念烹饪泰斗张元松大师',
        '【“职”等你来——餐饮业服务招聘季】私享厨宴（杭州）',
      ],
    },
    {
      title: '技能竞赛',
      img: 'https://picsum.photos/id/33/1000/800',
      subTitle: '“白象杯”面食烹饪邀请赛（东部赛区）上海完赛',
      list: [
        '关于第九届全国烹饪技能竞赛组织委员会启用公章等事项的决定',
        '中国川菜·2024第八届四川（泸州）美食节暨四川泸州菜烹饪技能大赛在泸州举办',
        '杨柳会长出席“新时代 新鲁菜”2023创新职业技能竞赛决赛暨',
      ],
    },
    {
      title: '展会信息',
      img: 'https://picsum.photos/id/34/1000/800',
      subTitle: ' 2024中国厨师节博览会在宜宾盛大开幕 ',
      list: [
        ' 第四届中国（淮安）国际食品博览会开幕',
        '2021中国预制菜产业大会暨展会将于12月在福州举办',
        '弘扬面食文化 探索面食未来——2020中国面食博览会在兰',
      ],
    },
    {
      title: '培训教育',
      img: 'https://picsum.photos/id/35/1000/800',
      subTitle: '2024职业教育餐饮类课程思政集体备课活动在武汉成功举办',
      list: [
        '第176期全国餐饮业营养配餐师培训班开班通知',
        '第176期全国餐饮业厨政管理师培训班开班通知',
        '关于举办全国餐饮业职业经理人专题研修班的通知',
      ],
    },
    {
      title: '饮食文化',
      img: 'https://picsum.photos/id/36/1000/800',
      subTitle: '轻食不等于无肉无油——中国烹饪协会发布指南，从选材、烹饪等方面做出规范',
      list: ['饮食与健康-缺钙了吃什么？', '饮食与健康-这些水果会加重肠胃负担？', '饮食与健康-荠菜的药用价值您知道吗？'],
    },
  ];
  const list6 = [
    'https://picsum.photos/id/23/1000/800',
    'https://picsum.photos/id/24/1000/800',
    'https://picsum.photos/id/25/1000/800',
    'https://picsum.photos/id/26/1000/800',
    'https://picsum.photos/id/27/1000/800',
    'https://picsum.photos/id/28/1000/800',
    'https://picsum.photos/id/29/1000/800',
    'https://picsum.photos/id/30/1000/800',
  ];
  const list7 = [
    {
      img: 'https://picsum.photos/id/40/1000/800',
      title: '中国餐饮',
    },
    {
      img: 'https://picsum.photos/id/41/1000/800',
      title: '中国烹饪',
    },
  ];
</script>
<style></style>
